<!-- 钱包转账记录 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize" @changePage="changePage"
    @search="getSearchList" @reset="onHideDetails(true)" @changeTh="data.dialogVisible = true">
    <template #form>
      <Operator ref="OperatorRef" @query="queryItem" />
      <el-form-item label="日期时间：">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
      <el-form-item label="平台ID：">
        <el-input type="text" v-model="data.query.account3d_id" placeholder="请输入平台ID" />
      </el-form-item>
      <el-form-item label="平台昵称：">
        <el-input type="text" v-model="data.query.account3d" placeholder="请输入平台昵称" />
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="data.query.status" placeholder="请选择">
          <el-option label="全部" :value="-1" />
          <el-option v-for="item in data.statusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                {{item.tips}}
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'account3d_id'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.account3d_id, 1)">
              {{ scope.row.account3d_id }}
            </span>
          </template>
          <template v-if="item.prop == 'account3d'" #default="scope">
            <span class="item_details" @click="checkUser(scope.row.account3d,3),data.checkedItem = scope.row">
              {{ scope.row.account3d }}
            </span>
          </template>
          <template v-if="item.prop == 'before'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.before) }}</span>
          </template>
          <template v-if="item.prop == 'amount'" #default="scope">
            <span :class="colorClass(BigWan(scope.row.amount))">{{ BigWan(scope.row.amount) }}</span>
          </template>
          <template v-if="item.prop == 'after'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.after) }}</span>
          </template>
          <template v-if="item.prop == 'agent_id'" #default="scope">
            {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
          </template>
          <template v-if="item.prop == 'status'" #default="scope">
            <el-tag :type="scope.row.status==1?'success':scope.row.status==2?'danger':'warning'">{{ selectToLabel(data.statusList, scope.row.status) }}</el-tag>
          </template>
          <template v-if="item.prop == 'ip'" #default="scope">
            {{ scope.row.ip }}
            <span v-if="scope.row.ip">({{ scope.row.ip_country }})</span>
          </template>
          <template v-if="item.prop == 'created_at'" #default="scope">
            {{ setTimestampTime(scope.row.created_at) }}
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>
  <!-- 玩家信息详情 -->
  <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import UserDetails from '@/views/player/components/user-details.vue'
import { selectToLabel,colorClass } from '@/utils/index'
import { BigWan } from '@/utils/math'
import { getDateDay, setTimeValue, setTimestampTime } from '@/utils/time'
import { getWalletTransfer } from '@/api/player'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    agent_id: -1,
    operated_id: -1,
    account3d_id: '',
    account3d: '',
    status: -1,
    date: [getDateDay(0), getDateDay(0)]
  },
  list: [],
  total: 0,
  fields: [
    { label: '平台ID', prop: 'account3d_id', width: '150', visible: true, tips: t('des_33') },
    { label: '平台昵称', prop: 'account3d', width: '180', visible: true, tips: t('des_34') },
    { label: '商户昵称', prop: 'agent_id', width: '120', visible: true, tips: t('des_35') },
    { label: '转账流水号', prop: 'tx_id', width: '', visible: true, tips: t('des_36') },
    { label: '转账前余额', prop: 'before', width: '', visible: true, tips: t('des_37') },
    { label: '转账金额', prop: 'amount', width: '', visible: true, tips: t('des_38') },
    { label: '转账后余额', prop: 'after', width: '', visible: true, tips: t('des_39') },
    { label: '状态', prop: 'status', width: '100', visible: true, tips: t('des_40') },
    { label: '失败原因', prop: 'fail_desc', width: '', visible: true, tips: t('des_41') },
    { label: '运营商IP', prop: 'ip', width: '', visible: true, tips: t('des_42') },
    { label: '创建时间', prop: 'created_at', width: '180', visible: true, tips: t('des_43') },
  ],
  statusList: [
    { label: '成功', value: 1 },
    { label: '失败', value: 2 },
    { label: '等待处理', value: 3 }
  ],
  dialogVisible: false,
  isUserDetails: false,
  checkedItem:{} as any
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await  getWalletTransfer(data.query)
  data.list = res.data.list
  data.total = res.data.total
}

// 查看玩家详情
const checkUser = async (val: any, type: number) => {
  if (type == 1) {
    data.query.account3d_id = val
    getSearchList()
  } else {
    // data.query.account3d = val
    data.isUserDetails = true
  }
}


// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.isUserDetails = false
  data.isUserDetails = false
  data.checkedItem = {} as any
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      agent_id: -1,
      operated_id: -1,
      account3d_id: '',
      account3d: '',
      status: -1,
      date: [getDateDay(0), getDateDay(0)]
    }
    OperatorRef.value.onHideDetails()
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>
